<template lang="">
    <div class="importPage">
        <el-card shadow="never" class="importCaseTop">
            <el-row class="search">
                <el-col :span="10">
                    <div class="importtitle">
                        <i class="el-icon-receiving"></i>
                        <span>导入用例</span>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <el-card shadow="hover" class="importadmin">
            <!-- <el-row class="down">
                <el-col :span="10"> -->
            <div class="down">
                <span>点击按钮下载用例模板</span><br />
                <el-button @click="dwoncasemodel" size="small" type="primary">用例模板</el-button><br /><br />
                <span>请按照用例模板说明编写用例</span><br />
                <span>用例文件仅支持上传一个</span><br />
                <span>用例导入成功后，在导入记录中可查看导入详情，导入反馈文件点击可下载，打开下载文件可查看用例导入失败原因</span><br />
            </div>
                <!-- </el-col>
            </el-row> -->
                <!-- action="http://127.0.0.1:8000/autoplat/importcase/" -->
            <el-upload class="upload-demo" 
                ref="upload"
                :action="getactionUrl()"
                accept=".xlsx" 
                :on-preview="handlePreview" 
                :on-remove="handleRemove"
                :before-remove="beforeRemove" 
                 multiple :limit="1" 
                :on-exceed="handleExceed" 
                :before-upload="beforeUpload"
                :file-list="fileList"
                :on-success="successUpload"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入用例</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
            </el-upload>

            <div class="refrom">
              <el-button @click="clickRefrom"  type="primary" plain>返回</el-button>
            </div>
        </el-card>

        <el-card shadow="hover" class="importrecord">
          <el-row class="record">
                <el-col :span="10">
                    <div class="title">
                        <span>导入记录</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="record">
              <el-table :data="record" style="width: 100%" stripe border>
                  <el-table-column type="index" label="序号" width="50"></el-table-column>
                  <el-table-column prop="viewname" label="文件名称" width="200"></el-table-column>
                  <el-table-column prop="casecount" label="导入用例数" width="100"></el-table-column>
                  <el-table-column prop="succount" label="导入成功数" width="100"></el-table-column>
                  <el-table-column prop="filcount" label="导入失败数" width="100"></el-table-column>
                  <el-table-column prop label="导入时间" width="193">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{
                        myDate(scope.row.create_time)
                        }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="create_user" label="导入者" width="80"></el-table-column>
                  <el-table-column label="导入反馈文件" >
                    <template slot-scope="scope">
                      <el-link @click="getImportFile(scope.row.savename)" type="primary">{{
                        scope.row.savename
                      }}</el-link>
                    </template>
                  </el-table-column>
              </el-table>
            </el-row>
         </el-card> 
    </div>
</template>
<script>
import { getImportRecord, getImportFiles, getCaseModel } from "@/network/networks";
import { myDate } from "@/assets/js/common";
import { baseUrl } from "@/network/request";
export default {
  components: {},

  data() {
    return {
      fileList: [],
      baseUrl: "",
      record: [],
    };
  },

  mounted() {
    this.getrecord();
  },



  methods: {

    getactionUrl(){
      return baseUrl + "/importcase/"
    },


    //下载用例模板
    dwoncasemodel() {
      getCaseModel()
      .then(response=>{
        let blob = new Blob([response.data]);
        // console.log(re)
        let fileNameEncode = response.headers['content-disposition'].split("filename=")[1]
        let fileName = decodeURIComponent(fileNameEncode);
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          //释放内存
          window.URL.revokeObjectURL(link.href);
        }
      });
    },

    clickRefrom() {
      this.$router.push({
          psth: "/casemanage",
          name: "CM"
        })
    },

    //获取导入记录
    getrecord() {
      getImportRecord()
        .then((res) => {
          if (res.code == 1) {
            this.record = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },

    //格式化时间
    myDate(time) {
      return myDate(time);
    },

    //下载用例导入记录
    getImportFile(filename) {
      getImportFiles({
        filename: filename
      })
      .then(response=>{
        let blob = new Blob([response.data]);
        let fileName = decodeURIComponent(filename);
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          //释放内存
          window.URL.revokeObjectURL(link.href);
        }
      });
    },

    geturl() {
      return this.baseUrl + "/autoplat/apps/testapp/inputcasefile";
    },

    successUpload(response, file, fileList) {
      if(response.code==1){
        this.$message.success(response.msg)
        this.getrecord()
      }else{
        this.$message.error(response.msg)
      }
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    beforeUpload(file) {
      console.log(file);
    },

    submitUpload() {
      // console.log(1111)
      // console.log(this.fileList[0])
      // console.log(this.$refs.upload)
      this.$refs.upload.submit();
    },

    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>


<style lang="less" scoped>
.importtitle {
  font-size: 28px;
  color: #409eff;
  span {
    padding-left: 10px;
  }
}

.title {
  font-size: 20px;
  color: #409eff;
  span {
    padding-left: 10px;
  }
}


.importadmin {
  margin-top: 10px;
  padding: 30px 0;
  .down{
    .el-button{
        margin-top: 10px;
    }
  }
  .upload-demo{
    margin-top: 30px;
  }
  .refrom{
    margin-top: 30px;
  }
}

.importrecord {
  margin-top: 10px;
  padding: 30px 0;
}
</style>